<template>
  <div class="mform">
    <div class="back">
      <Back>
        <div class="form-btn">
          <el-button type="primary" @click="save()">保存</el-button>
        </div>
      </Back>
    </div>
    <div class="form-content">
      <div class="form-box edit-form" style="width: 100%;">
        <el-tabs v-model="active" type="card">
          <el-tab-pane label="基础资料" name="base">
            <div style="width: 60%;margin: 0 auto;">
              <el-form ref="formRef" :model="form" :rules="rules" :label-position="'left'" label-width="auto" inline>
                <el-form-item label="商品名称" prop="name" required>
                  <el-input v-model="form.name" placeholder="请输入商品名称" clearable />
                </el-form-item>
                <el-form-item label="商品条码" prop="barcode" required v-if="form.id">
                  <el-input v-model="form.barcode" disabled placeholder="请输入商品条码" clearable />
                </el-form-item>
                <el-form-item label="分类" prop="category" required>
                  <el-select v-model="form.category" filterable placeholder="请选择" clearable>
                    <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="简短描述" prop="short">
                  <el-input v-model="form.short" placeholder="请输入" clearable />
                </el-form-item>
                <el-form-item label="标签" prop="tag">
                  <el-input v-model="form.tag" placeholder="示例：微甜,清爽" clearable />
                </el-form-item>
                <el-form-item label="规格" prop="mdl">
                  <el-input v-model="form.mdl" placeholder="10g" clearable />
                </el-form-item>
                <el-form-item label="上下架" prop="state">
                  <el-radio-group v-model="form.state">
                    <el-radio label="1">上架</el-radio>
                    <el-radio label="2">下架</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="缩略图" prop="thumb">
                  <el-upload class="avatar-uploader" :action="`${$imgUrl}/common/upload/pic`" :headers="{
                    token: $pinia.state.value.store.token
                  }" :show-file-list="false" :on-success="handleLogoSuccess">
                    <img v-if="form.thumb" :src="$imgUrl + form.thumb" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon">
                      <Plus />
                    </el-icon>
                  </el-upload>
                </el-form-item>
                <el-divider content-position="left">价格信息</el-divider>
                <el-form-item label="售价" prop="price" required>
                  <el-input v-model="form.price" placeholder="请输入" clearable />
                </el-form-item>
              </el-form>

            </div>
          </el-tab-pane>
          <el-tab-pane label="属性规格" name="spec">
            <div style="width: 60%;margin: 0 auto;">
              <el-button type="primary" @click="addSpec" v-if="spec.length < 3">添加</el-button>
              <div class="spec" v-for="(specItem, specIndex) in spec" :key="specIndex" style="margin-bottom: 20px;">
                <div style="display: flex;">
                  <el-input placeholder="请输入属性" v-model="specItem.name" style="width: 160px;"></el-input>
                  <el-radio-group v-model="specItem.state" style="margin: 0 20px;">
                    <el-radio-button label="启用" value="1" />
                    <el-radio-button label="禁用" value="2" />
                  </el-radio-group>
                  <el-input placeholder="请输入备注" v-model="specItem.data" style="width: 160px;"></el-input>
                  <el-button type="danger" @click="delSpec">删除</el-button>
                </div>
                <div style="text-align: center">
                  <el-table :data="specItem.spec_info" border style="width: 100%">
                    <el-table-column prop="name" label="值" align="center">
                      <template #default="scope">
                        <el-input placeholder="请输入值" v-model="scope.row.name"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column prop="price" label="加价" align="center">
                      <template #default="scope">
                        <el-input placeholder="请输入价格" v-model="scope.row.price"></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" align="center">
                      <template #default="scope">
                        <el-button link type="danger"
                          @click="delSpecInfo(specIndex, scope.$index, scope.row)">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-button type="primary" icon="Plus" circle @click="addSpecInfo(specIndex)"></el-button>
                </div>
              </div>
            </div>

          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<script setup name="GoodsDetail">
const { proxy } = getCurrentInstance()

const formRef = ref();
const form = reactive({ id: '', name: '', alias: '', category: '', mdl: '', price: '', thumb: '', state: '1', short: '', tag: '', spec: [] });
const active = ref('base');

//验证规则
const rules = {
  name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
  category: [{ required: true, message: '请选择', trigger: 'change' }],
  price: [{ required: true, message: '请输入售价', trigger: 'blur' }],
};
//保存
async function save() {
  formRef.value.validate(async (valid) => {
    if (valid) {
      form.spec = spec.value
      let res = await proxy.$post('GoodsSave', form)
      if (res.code === 0) {
        ElMessage({ type: 'success', message: '保存成功' });
        proxy.$bus.emit('back');
      }
    }
  });
}

async function getDetail(id) {
  let res = await proxy.$get('GoodsDetail', {
    id
  })
  if (res.code === 0) {
    spec.value = res.data.spec
    Object.assign(form, res.data);
  }
}

// 分类列表
const cateList = ref([])
async function getCate() {
  let res = await proxy.$get('GoodsCateList', { page: 1, page_size: 1000 }, false)
  if (res.code === 0) {
    cateList.value = res.data.list || []
  }
}

// 缩略图
const handleLogoSuccess = (res) => {
  if (res.code == 0) {
    form.thumb = res.data.url
  } else {
    ElMessage({ type: 'error', message: '上传失败' });
  }
}



onMounted(() => {
  getCate()
  // 编辑
  let id = proxy.$route.query.id || null;
  if (id) {
    getDetail(id)
  }
});



// 属性规格
const spec = ref([])
function addSpec() {
  spec.value.push({
    name: '',
    state: '1',
    data: '',
    spec_info: []
  })
}
function delSpec(index) {
  spec.value.splice(index, 1)
}

function addSpecInfo(index) {
  spec.value[index].spec_info.push({
    name: '',
    price: 0
  })
}
function delSpecInfo(specIndex, index, specInfoItem) {
  spec.value[specIndex].spec_info.splice(index, 1)
}

</script>
<style scoped lang="scss">
.img-box {
  display: inline-block;
  position: relative;
  margin-right: 10px;

  .close {
    position: absolute;
    right: 0;
    top: 0;
  }
}
</style>
